<template>
  <div class="statistics">
    <a-row :gutter="16">
      <a-col :span="24">
        <animated-card>
          <template #title>
            <div class="chart-header">
              <span>API 调用趋势</span>
              <a-radio-group v-model:value="period" button-style="solid">
                <a-radio-button value="day">日</a-radio-button>
                <a-radio-button value="week">周</a-radio-button>
                <a-radio-button value="month">月</a-radio-button>
              </a-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="apiTrendOption" autoresize />
        </animated-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="mt-4">
      <a-col :span="12">
        <animated-card>
          <template #title>数据库连接状态</template>
          <v-chart class="chart" :option="dbStatusOption" autoresize />
        </animated-card>
      </a-col>
      <a-col :span="12">
        <animated-card>
          <template #title>API 方法分布</template>
          <v-chart class="chart" :option="apiMethodOption" autoresize />
        </animated-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="mt-4">
      <a-col :span="12">
        <animated-card>
          <template #title>数据库类型分布</template>
          <v-chart class="chart" :option="dbTypeOption" autoresize />
        </animated-card>
      </a-col>
      <a-col :span="12">
        <animated-card>
          <template #title>响应时间分布</template>
          <v-chart class="chart" :option="responseTimeOption" autoresize />
        </animated-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { useApiStore } from '../stores/api'
import { useDatabaseStore } from '../stores/database'
import { useAppStore } from '../stores/app'
import AnimatedCard from './AnimatedCard.vue'

echarts.use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

const apiStore = useApiStore()
const dbStore = useDatabaseStore()
const appStore = useAppStore()

const period = ref('day')
const loading = ref(false)

const apiTrendOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '调用次数',
      type: 'line',
      smooth: true,
      data: []
    }
  ]
})

const dbStatusOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '连接状态',
      type: 'pie',
      radius: '50%',
      data: []
    }
  ]
})

const apiMethodOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '请求方法',
      type: 'pie',
      radius: '50%',
      data: []
    }
  ]
})

const dbTypeOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数据库类型',
      type: 'pie',
      radius: '50%',
      data: []
    }
  ]
})

const responseTimeOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['<100ms', '100-500ms', '500-1000ms', '>1000ms']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '响应时间',
      type: 'bar',
      data: []
    }
  ]
})

const refreshStats = async () => {
  loading.value = true
  try {
    const [apiStats, dbStats] = await Promise.all([
      apiStore.fetchStatistics(period.value),
      dbStore.fetchStatistics()
    ])

    // 更新 API 调用趋势
    apiTrendOption.value.xAxis.data = apiStats.trend.map(item => item.time)
    apiTrendOption.value.series[0].data = apiStats.trend.map(item => item.count)

    // 更新数据库连接状态
    dbStatusOption.value.series[0].data = dbStats.status.map(item => ({
      name: item.status,
      value: item.count
    }))

    // 更新 API 方法分布
    apiMethodOption.value.series[0].data = apiStats.methods.map(item => ({
      name: item.method,
      value: item.count
    }))

    // 更新数据库类型分布
    dbTypeOption.value.series[0].data = dbStats.types.map(item => ({
      name: item.type,
      value: item.count
    }))

    // 更新响应时间分布
    responseTimeOption.value.series[0].data = apiStats.responseTime

  } catch (error) {
    appStore.addNotification({
      type: 'error',
      message: '获取统计数据失败',
      description: error.message
    })
  } finally {
    loading.value = false
  }
}

watch(period, () => {
  refreshStats()
})

onMounted(() => {
  refreshStats()
})
</script>

<style scoped>
.statistics {
  padding: 16px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart {
  height: 300px;
}

.mt-4 {
  margin-top: 16px;
}

:deep(.ant-card-head) {
  border-bottom: none;
}

:deep(.ant-card-body) {
  padding: 16px;
}
</style> 